<template>
  <!-- 外层盒子 -->
  <div class="outerBox">
    <!-- tab栏 -->
    <div class="tabBox">
      <div v-for="item in data.tabList" :key="item.selectId"
        :class="item.selectId == data.pitchId ? 'Selected-style' : ''" @click="cut(item.selectId)">
        {{ item.title }}
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="subject" v-if="data.pitchId == '0001'">
      <div class="Tab-Control" v-for="(item, index) in data.TabControlData" :key="index">
        <!-- title描述 -->
        <div class="pull-down" @click="item.flag = !item.flag">
          <div>{{ item.item }}</div>
          <div>
            <i :class="[
              'iconfont',
              item.flag == false
                ? 'icon-xiangxiajiantou'
                : 'icon-xiangshangjiantou',
            ]"></i>
          </div>
        </div>
        <!-- 树状选择 -->
        <div class="arborescence" v-if="item.flag == true">
          <el-tree :data="item.children" :props="defaultProps" :accordion="false" :node-key="item.id">
            <template #default="{ node, data }">
              <!-- <el-checkbox /> -->
              <div>
                <span><el-checkbox v-if="node.level !== 1" v-model="data.flag" @change="checkout(node, data)" /></span>
                <span>{{ data.item }}</span>
              </div>
            </template>
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const emit = defineEmits(['setData'])
const data = reactive({
  tabList: [
    // tab选项
    {
      title: "装备",
      selectId: "0001",
    },
    {
      title: "频段",
      selectId: "0002",
    },
    {
      title: "业务",
      selectId: "0003",
    },
  ],
  pitchId: "0001", // tab选中的按钮（初始值）
  //选项卡数据
  TabControlData: [
    {
      item: "飞机",
      flag: false, // 状态
      id: "1",
      children: [
        {
          colorNum: 1,
          endTime: 11000,
          item: "歼-10",
          quantity: 10000,
          startTime: 9000,
          pid: "1", // 一级分类
          id: "11",
          children: [
            {
              colorNum: 1,
              endTime: 12000,
              item: "装备A",
              quantity: 11000,
              startTime: 10000,
              pid: "1", // 一级分类
              openid: "11", // 二级分类
              flag: false, // 状态
            },
            {
              colorNum: 1,
              endTime: 13000,
              item: "装备B",
              quantity: 12000,
              startTime: 11000,
              pid: "1",
              openid: "11", // 二级分类
              flag: false,
            },
            {
              colorNum: 1,
              endTime: 14000,
              item: "装备C",
              quantity: 13000,
              startTime: 12000,
              pid: "1",
              openid: "11", // 二级分类
              flag: false,
            },
          ],
        },
        {
          colorNum: 2,
          endTime: 17000,
          item: "歼-11",
          quantity: 16000,
          startTime: 15000,
          pid: "1",
          id: "12",
          children: [
            {
              colorNum: 2,
              endTime: 20000,
              item: "装备",
              quantity: 19000,
              startTime: 18000,
              pid: "1",
              openid: "12", // 二级分类
              id: "121",
            },
            {
              colorNum: 2,
              endTime: 23000,
              item: "装备",
              quantity: 22000,
              startTime: 21000,
              pid: "1",
              openid: "12", // 二级分类
              id: "122",
            },
            {
              colorNum: 2,
              endTime: 26000,
              item: "装备",
              quantity: 25000,
              startTime: 24000,
              pid: "1",
              openid: "12", // 二级分类
              id: "123",
            },
          ],
        },
        {
          colorNum: 3,
          endTime: 29000,
          item: "歼-16",
          quantity: 28000,
          startTime: 27000,
          id: "13",
          pid: "1",
          children: [
            {
              colorNum: 3,
              endTime: 32000,
              item: "装备",
              quantity: 31000,
              startTime: 30000,
              openid: "13",
              pid: "1",
              id: "131",
            },
            {
              colorNum: 3,
              endTime: 35000,
              item: "装备",
              quantity: 34000,
              startTime: 33000,
              openid: "13",
              pid: "1",
              id: "132",
            },
            {
              colorNum: 3,
              endTime: 38000,
              item: "装备",
              quantity: 37000,
              startTime: 36000,
              openid: "13",
              pid: "1",
              id: "133",
            },
          ],
        },
        {
          colorNum: 4,
          endTime: 41000,
          item: "歼-20",
          quantity: 40000,
          startTime: 39000,
          pid: "1",
          id: "14",
        },
        {
          colorNum: 5,
          endTime: 44000,
          item: "空管-500",
          quantity: 43000,
          startTime: 42000,
          pid: "1",
          id: "15",
        },
        {
          colorNum: 6,
          endTime: 47000,
          item: "空管-2000",
          quantity: 46000,
          startTime: 45000,
          pid: "1",
          id: "16",
        },
      ],
    },
    {
      item: "舰船",
      flag: false,
      id: "2",
      children: [
        {
          colorNum: 2,
          endTime: 50000,
          item: "item1",
          quantity: 49000,
          startTime: 48000,
          pid: "2",
          id: "22",
          children: [
            {
              colorNum: 1,
              endTime: 53000,
              item: "item12",
              quantity: 52000,
              startTime: 51000,
              pid: "2",
              openid: "22",
              id: "221",
            },
            {
              colorNum: 1,
              endTime: 56000,
              item: "item13",
              quantity: 55000,
              startTime: 54000,
              pid: "2",
              openid: "22",
              id: "222",
            },
            {
              colorNum: 1,
              endTime: 59000,
              item: "item14",
              quantity: 58000,
              startTime: 57000,
              pid: "2",
              openid: "22",
              id: "223",
            },
          ],
        },
        {
          colorNum: 2,
          endTime: 62000,
          item: "item2",
          quantity: 61000,
          startTime: 60000,
          pid: "2",
          id: "23",
          children: [
            {
              colorNum: 2,
              endTime: 65000,
              item: "item22",
              quantity: 64000,
              startTime: 63000,
              pid: "2",
              openid: "23",
              id: "231",
            },
            {
              colorNum: 2,
              endTime: 68000,
              item: "item23",
              quantity: 67000,
              startTime: 66000,
              pid: "2",
              openid: "23",
              id: "231",
            },
            {
              colorNum: 24,
              endTime: 71000,
              item: "item24",
              quantity: 70000,
              startTime: 69000,
              pid: "2",
              openid: "23",
              id: "231",
            },
          ],
        },
        {
          colorNum: 3,
          endTime: 74000,
          item: "item3",
          quantity: 73000,
          startTime: 72000,
          pid: "2",
          id: "24",
          children: [
            {
              colorNum: 3,
              endTime: 77000,
              item: "item32",
              quantity: 76000,
              startTime: 75000,
              pid: "2",
              openid: "24",
              id: "241",
            },
            {
              colorNum: 3,
              endTime: 80000,
              item: "item33",
              quantity: 79000,
              startTime: 78000,
              pid: "2",
              openid: "24",
              id: "242",
            },
            {
              colorNum: 3,
              endTime: 83000,
              item: "item34",
              quantity: 82000,
              startTime: 81000,
              pid: "2",
              openid: "24",
              id: "243",
            },
          ],
        },
        {
          colorNum: 4,
          endTime: 86000,
          item: "item4",
          quantity: 85000,
          startTime: 84000,
          pid: "2",
          id: "25",
        },
        {
          colorNum: 5,
          endTime: 89000,
          item: "item5",
          quantity: 88000,
          startTime: 87000,
          pid: "2",
          id: "26",
        },
      ],
    },
    {
      item: "车辆",
      flag: false,
      id: "3",
      children: [
        {
          colorNum: 1,
          endTime: 92000,
          item: "item1",
          quantity: 91000,
          startTime: 90000,
          pid: "3",
          id: "31",
          children: [
            {
              colorNum: 1,
              endTime: 95000,
              item: "item12",
              quantity: 94000,
              startTime: 93000,
              pid: "3",
              openid: "31",
              id: "311",
            },
            {
              colorNum: 1,
              endTime: 98000,
              item: "item13",
              quantity: 97000,
              startTime: 96000,
              pid: "3",
              openid: "31",
              id: "312",
            },
            {
              colorNum: 14,
              endTime: 102000,
              item: "item14",
              quantity: 101000,
              startTime: 100000,
              pid: "3",
              openid: "31",
              id: "313",
            },
          ],
        },
        {
          colorNum: 2,
          endTime: 105000,
          item: "item2",
          quantity: 10400,
          startTime: 103000,
          pid: "3",
          id: "31",
          children: [
            {
              colorNum: 2,
              endTime: 108000,
              item: "item22",
              quantity: 107000,
              startTime: 106000,
              pid: "3",
              openid: "31",
              id: "311",
            },
            {
              colorNum: 3,
              endTime: 111000,
              item: "item23",
              quantity: 110000,
              startTime: 109000,
              pid: "3",
              openid: "31",
              id: "312",
            },
            {
              colorNum: 2,
              endTime: 114000,
              item: "item24",
              quantity: 113000,
              startTime: 112000,
              pid: "3",
              openid: "31",
              id: "313",
            },
          ],
        },
        {
          colorNum: 3,
          endTime: 117000,
          item: "item3",
          quantity: 116000,
          startTime: 115000,
          pid: "3",

          id: "32",
          children: [
            {
              colorNum: 3,
              endTime: 120000,
              item: "item32",
              quantity: 119000,
              startTime: 118000,
              pid: "3",
              openid: "32",
              id: "321",
            },
            {
              colorNum: 3,
              endTime: 124000,
              item: "item33",
              quantity: 123000,
              startTime: 122000,
              pid: "3",
              openid: "32",
              id: "322",
            },
            {
              colorNum: 3,
              endTime: 127000,
              item: "item34",
              quantity: 126000,
              startTime: 125000,
              pid: "3",
              id: "323",
              openid: "32",
            },
          ],
        },
        {
          colorNum: 4,
          endTime: 130000,
          item: "item4",
          quantity: 129000,
          startTime: 128000,
          pid: "3",
          id: "33",
        },
        {
          colorNum: 5,
          endTime: 134000,
          item: "item5",
          quantity: 133000,
          startTime: 132000,
          pid: "3",
          id: "34",
        },
      ],
    },
  ],
  pitchOnList: [
    // 选中的子集数据
    {
      plant: "飞机",
      list: [],
    },
    {
      plant: "舰船",
      list: [],
    },
    {
      plant: "车辆",
      list: [],
    },
  ],
  childList: [], // 所有的第三层数据
  secondList: [], // 所有的第二层数据
});
const defaultProps = {
  // 树形控件
  children: "children",
  label: "item",
};
onMounted(() => {
  filtersList(), second();
});

const second = () => {
  // 拿到所有的第二层的数据
  data.TabControlData.forEach((item) => {
    // 第一层
    if (item.children) {
      item.children.forEach((obj) => {
        // 第二层
        data.secondList.push(obj);
      });
    }
  });
};

const filtersList = () => {
  // 拿到所有的第三层的数据
  data.TabControlData.forEach((item) => {
    // 第一层
    if (item.children) {
      item.children.forEach((obj) => {
        // 第二层
        if (obj.children) {
          // data.pitchOnList.push(obj)
          obj.children.forEach((items) => {
            // 第三层
            // console.log(items);
            if (!items.children) {
              data.childList.push(items);
            }
          });
        }
      });
    }
  });
};

// tab切换
const cut = (id) => {
  data.pitchId = id;
};
// 复选框选择
const checkout = (node, val) => {
  data.pitchOnList.forEach((obj) => {
    obj.list = [];
  });
  let arr = data.childList.filter((item) => item.flag); // 拿到选中的三级数据
  console.log(arr);
  arr.forEach((item) => {
    if (item.pid == "1") {
      // 通过pid判断分类
      data.pitchOnList[0].list.push(item);
    } else if (item.pid == "2") {
      data.pitchOnList[1].list.push(item);
    } else {
      data.pitchOnList[2].list.push(item);
    }
  });
  // console.log(data.pitchOnList);
  emit('setData', data.pitchOnList)
};
</script>

<style scoped lang='scss'>
@import "@/assets/icons/iconfont.css";

.outerBox {
  // 外层盒子
  width: 286px;
  height: 500px;
  position: fixed;
  top: 100px;
  right: 0;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;

  .tabBox {
    // tab栏
    width: 100%;
    height: 50px;
    border-radius: 4px;
    background-color: #dfdfdf;
    padding: 5px;
    display: flex;

    div {
      //tab按钮选项
      flex: 1;
      height: 100%;
      // background-color: #fff;
      text-align: center;
      line-height: 40px;
      color: #5c5c5c;
      font-weight: 600;
    }
  }

  .subject {
    // 主体内容
    width: 100%;
    // border: 1px solid #dfdfdf;
    margin-top: 10px;
    border-radius: 4px;
    overflow-y: scroll;
    height: calc(100% - 50px);

    .Tab-Control {
      //头部下拉
      // width: 100%;
      margin: 1px;

      .pull-down {
        //头部内容
        display: flex;
        justify-content: space-between;
        padding: 5px 10px;
        color: #5c5c5c;
        background-color: #dfdfdf;
      }
    }

    .arborescence {
      border: 1px solid #dfdfdf;
      border-top: none;
      padding: 10px;
    }
  }
}

.Selected-style {
  // 选中tab的样式
  color: #496aed !important;
  background-color: #fff;
  border-radius: 1px;
}

::-webkit-scrollbar-track-piece {
  background: #d3dce6;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: #99a96f;
  border-radius: 20px;
}
</style>